<template>
	<f-popup ref="popup" position="bottom">
		<view class="gap-body " @tap.stop.prevent="stopfun">
			<view class="head font-size-32 flex align-center justify-between border-b">
				<view class="btn" @click="close">
					<text class="primary-color">取消</text>
				</view>
				<view class="">
					<text>地区选择</text>
				</view>
				<view class="btn" @click="confirm">
					<text class="primary-color">确定</text>
				</view>
			</view>
			<picker-view class="gap-main" :indicator-style="indicatorStyle" :value="defaultVal" @change="change">
				<picker-view-column v-if="level >= 1">
					<view class="picker-item" :style="indicatorStyle" v-for="(item, index) in province"
						:key="index">
						<text :style="indicatorStyle" class="block-text picker-item">{{item.label}}</text>
					</view>
				</picker-view-column>
				<picker-view-column v-if="level >= 2">
					<view class="picker-item" :style="indicatorStyle" v-for="(item, index) in city[defaultVal[0]]"
						:key="index">
						<text :style="indicatorStyle" class="block-text picker-item">{{item.label}}</text>
					</view>
				</picker-view-column>
				<picker-view-column v-if="level >= 3">
					<view class="picker-item" :style="indicatorStyle"
						v-for="(item, index) in area[defaultVal[0]][defaultVal[1]]" :key="index">
						<text :style="indicatorStyle" class="block-text picker-item">{{item.label}}</text>
					</view>
				</picker-view-column>
			</picker-view>
		</view>
	</f-popup>
</template>
<script>
	import provinceData from '@/libs/city-data/province.js';
	import cityData from '@/libs/city-data/city.js';
	import areaData from '@/libs/city-data/area.js';
	export default {
		name: "area-picker",
		props: {
			cancelText: {
				type: String,
				default: '取消'
			},
			cancelClass: {
				type: String,
				default: 'color-gray'
			},
			confirmText: {
				type: String,
				default: '确定'
			},
			confirmClass: {
				type: String,
				default: 'primary-color'
			},
			value: {
				type: Array,
				default () {
					return ['', '', '']
				}
			},
			level: {
				type: Number,
				default: 3
			},
			indicatorStyle: {
				type: String,
				default: 'height:50px; line-height:50px;'
			},
		},
		data() {
			return {
				province: provinceData,
				city: cityData,
				area: areaData,
				defaultVal: [0, 0, 0],
				realshow: false
			}
		},
		watch: {
			value(nv, ov) {
				this.setDefault();
			},
			defaultVal(nv, ov) {
				if (ov[0] != nv[0]) {
					this.defaultVal.splice(1, 1, 0);
					this.defaultVal.splice(2, 1, 0);
				} else if (ov[1] != nv[1]) {
					this.defaultVal.splice(2, 1, 0);
				}
			}
		},
		created() {
			this.setDefault();
		},
		methods: {
			setDefault() {
				if (this.value[0] == '') {
					return;
				}
				this.$nextTick(() => {
					this.defaultVal.splice(0, 1, this.arrayIndexOf(this.province, this.value[0]));
					if (this.value[1] == '') {
						return;
					}
					this.$nextTick(() => {
						this.defaultVal.splice(1, 1, this.arrayIndexOf(this.city[this.defaultVal[0]],
							this.value[1]));
						if (this.value[2] == '') {
							return;
						}
						this.$nextTick(() => {
							this.defaultVal.splice(2, 1, this.arrayIndexOf(this.area[this
								.defaultVal[0]][this.defaultVal[1]], this.value[2]));
						})
					})
				});
			},
			arrayIndexOf(arr, needFind) {
				var index = 0;
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].label == needFind) {
						index = i;
						return i;
					}
				}
				return index;
			},
			change(e) {
				var res = e.detail.value;
				if (!res[0]) {
					res[0] = 0;
				}
				if (!res[1]) {
					res[1] = 0;
				}
				if (!res[2]) {
					res[2] = 0;
				}
				this.defaultVal = res;
			},
			confirm() {
				var codes = [
					provinceData[this.defaultVal[0]].value,
					cityData[this.defaultVal[0]][this.defaultVal[1]].value,
					areaData[this.defaultVal[0]][this.defaultVal[1]][this.defaultVal[2]].value ? areaData[this
						.defaultVal[0]][this.defaultVal[1]][this.defaultVal[2]].value : 0
				];
				var names = [
					provinceData[this.defaultVal[0]].label,
					cityData[this.defaultVal[0]][this.defaultVal[1]].label,
					areaData[this.defaultVal[0]][this.defaultVal[1]][this.defaultVal[2]].label ? areaData[this
						.defaultVal[0]][this.defaultVal[1]][this.defaultVal[2]].label : ''
				];
				codes = codes.splice(0, this.level);
				names = names.splice(0, this.level);
				var res = {
					codes: codes,
					names: names,
					indexs: this.defaultVal
				};
				this.$emit('change', res);
				this.$refs.popup.close();
			},
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			stopfun(e) {
				e.stopPropagation();
				return null;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.gap-body {
		height: 500rpx;
		position: relative;
		overflow: hidden;
		background-color: #FFFFFF;
		border-radius: 16rpx 16rpx 0 0;
		padding-bottom: calc(60rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(60rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.head {
		padding: 0 32rpx;
	}

	.btn {
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.gap-main {
		width: 750rpx;
		height: 500rpx;
	}

	.picker-item {
		overflow: hidden;
		font-size: 32rpx;
		height: 50px;
		line-height: 50px;
		overflow: hidden;
		text-align: center;
	}
</style>
